<template>
    <div>

        <el-form  :model="getList"  class="demo-form-inline">

            <el-form-item label="年级" :label-width="formLabelWidth">
                <el-select v-model="getList.ade" placeholder="请选择"  @change="grad">
                  <el-option
                    v-for="item in grade"
                    :value="item.dictValue" 
                    :key="item.dictValue"             
                    :label="item.dictLabel">
                  </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="学科" :label-width="formLabelWidth">
                <el-select v-model="getList.pointIds" placeholder="请选择"  @change="tree">
                  <el-option                 
                    v-for="item in findData"
                    :value="item.id" 
                    :key="item.id"             
                    :label="item.subject"
                    >
                  </el-option >
                </el-select>              
            </el-form-item>

            <el-form-item label="题干" :label-width="formLabelWidth">
              <el-input v-model="getList.questionText"></el-input>
            </el-form-item>

            <el-form-item label="选项" :label-width="formLabelWidth">

                <span style="margin-left: 55px;">{{ this.A }}</span><el-input v-model="A" style="width: 50px;margin-top: 20px;margin-left: 35px;"></el-input><el-input v-model="getList.optionA" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>             
                <span style="margin-left: 55px;">{{ this.B }}</span><el-input v-model="B" style="width: 50px;margin-top: 20px; margin-left: 35px;"></el-input><el-input v-model="getList.optionB" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>
                <span style="margin-left: 55px;">{{ this.C }}</span><el-input v-model="C" style="width: 50px; margin-top: 20px;margin-left: 35px;"></el-input><el-input v-model="getList.optionC" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>
                <span style="margin-left: 55px;">{{ this.D }}</span><el-input v-model="D" style="width: 50px;margin-top: 20px; margin-left: 35px;"></el-input><el-input v-model="getList.optionD" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>
            </el-form-item>

            <el-form-item label="标答" :label-width="formLabelWidth">
              <el-radio-group v-model="getList.answer">
                <el-radio label="A"></el-radio>
                <el-radio label="B"></el-radio>
                <el-radio label="C"></el-radio>
                <el-radio label="D"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="解析" :label-width="formLabelWidth">
              <el-input v-model="getList.explanation"></el-input>
            </el-form-item>

            <el-form-item label="分数" :label-width="formLabelWidth">
              <el-input-number v-model="getList.score"  :min="1" :max="10" label="描述文字"></el-input-number>
            </el-form-item>

            <el-form-item label="难度" :label-width="formLabelWidth">
                <el-rate v-model="getList.difficultyLevel" style="margin-top: 10px;"></el-rate>
            </el-form-item>

            <el-form-item label="知识点树" :label-width="formLabelWidth">  
              <Treeselect
                v-model="getList.treeIds"   
                :options="treeList"  
                placeholder="请选择"
                noOptionsText="暂无数据"
                noChildrenText="没有子选项" 
                show-count="true"
                :multiple="true"
              />
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-left: 130px;">
          <el-button type="primary" size="medium" v-if="this.id==null" @click="add()">提 交</el-button>
          <el-button type="primary" size="medium" v-else @click="upData()">题 交</el-button>

          <el-button  @click="reset()" size="medium">重 置</el-button>

          <el-button  type="success" size="medium">添加选项</el-button>
          <el-button  type="success" @click="getFor()" size="medium">预 览</el-button>
        </div>

        <!-- 预览 -->
        <el-dialog
          :visible.sync="dialogFormVisible"
          width="30%">
        
          <p>{{ this.A }}: &nbsp;&nbsp; {{this.optionA}} &nbsp;&nbsp; {{ this.B }}: &nbsp;&nbsp; {{this.optionB}} &nbsp;&nbsp; {{ this.C }}:&nbsp;&nbsp; {{this.optionC}} {{ this.D }}:&nbsp;&nbsp; {{this.optionD}} </p>
          <span slot="footer" class="dialog-footer">

          </span>
        </el-dialog>

    </div>
</template>

<script>
import axios from 'axios';
import Treeselect from '@riophae/vue-treeselect'  
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {  
    Treeselect  
  },
    data(){
        return{
            id:'',
            formLabelWidth: '120px', //新增表单宽度
            dialogFormVisible: false, //新增弹窗
            grade:[],
            findData:[],
            getList:{
               "ade": "",
               "answer": "",
               "difficultyLevel": 0,
               "discipline": "",
               "explanation": "",
               "id": 0,
               "jonTree": "",
               "knowledgePoint": "",
               "modifyTime": "",
               "optionA": "",
               "optionB": "",
               "optionC": "",
               "optionD": "",
               "point": "",
               "pointIds": "",
               "questionText": "",
               "questions": "",
               "score": 0,
               "strAde": "",
               "strPoint": "",
               "strTree": "",
               "treeIds": [],
              
            },
           A:'A',
           B:'B',
           C:'C',
           D:'D',
           optionA:"",
           optionB:"",
           optionC:"",
           optionD:"",
           treeList:[],
           subjectId:'',
           dictLabel:'',

            idd:"",
            subId:''

        }
    },
    created(){
      this.id = sessionStorage.getItem("id")
      console.log(this.id);
        this.searchDict()
       
       
        if(this.id){
          this.getBuestions()
          // this.tree()
           
        }
        
       
    },
    methods:{
      //修改
      upData(){
        this.getList.pointIds = this.idd
        axios.put("/api/buestions/updateBuestions", this.getList).then(res=>{
          this.$message({
              message: res.data.message,
              type: 'success'
            });
        })
        this.$router.push("/online")
      },

      //回显
      getBuestions(){
        axios.get("/api/buestions/findBuestionsById?id="+this.id).then(res=>{
          this.getList = res.data.data
          this.getList.ade = res.data.data.strAde
          this.getList.pointIds = res.data.data.strPoint
          this.idd = res.data.data.strId
          this.subjectId = res.data.data.strId
          this.Tree()
          // this.Subjec()          
          sessionStorage.removeItem("id")
          
        })
      },

        //新增
        add(){
            this.getList.questions = 0
            axios.post("/api/buestions/addBuestions",this.getList).then(res=>{

                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
            })
            this.$router.push("/online")
        },

        

        //年级
        searchDict(){
            axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
            this.grade =res.data.data
            })
        },

        //判断学科
        grad(val){
          this.subId = val  
          this.Subjec()         
                 
        },
        //学科
        Subjec(){
            axios.get("/api/subject/SubjectList?id="+this.subId).then(res=>{
                this.findData = res.data.data
            })
        },
        //重置
        reset(){
            this.getList={}
        },
        //预览
        getFor(){
            this.dialogFormVisible=true
            this.optionA = this.getList.optionA
            this.optionB = this.getList.optionB
            this.optionC = this.getList.optionC
            this.optionD = this.getList.optionD
        },
        

        //判断树
        tree(val){         
          this.subjectId = val
          console.log("val=",val);
          this.Tree()
        },
        //树
        Tree(){
            axios.post("/api/pointTree/findPointTreeList?subjectId="+this.subjectId,{}).then(res=>{
                //弹框
                this.treeList = res.data.data
                console.log(this.treeList);
                
               
            })
        },

    }
}
</script>

<style scoped>

</style>